<%--
    @Description： 看板展示页面
    @Author： 樊双峰
    @Date： 2018-07-05 22:56
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<g:set var="ctx" value="${request.getContextPath()}"/>
<html>
<head>
    <title>设备看板展示</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/eqpBoard/showEqpBoard.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/eqpBoard/layui.css">
    <script type="text/javascript" src="${ctx}/js/eqpBoard/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="${ctx}/js/eqpBoard/float.js"></script>
    <script type="text/javascript" src="${ctx}/js/eqpBoard/ht/ht.js"></script>
    <script type="text/javascript" src="${ctx}/js/eqpBoard/ht/ht-historymanager.js"></script>
</head>

<body>
<!-- 整个body显示页面 START -->
<div class="content">
    <!-- 标题 START -->
    <div class="title">
        <div class="titleText" id="titleText" title="设备看板">EQUIPMENT BOARD</div>
        <div class="titleState" title="设备状态">
            <ul>
                <g:each in="${getStateColor}" status="i" var="stateColorInstance">
                    <g:each in="${getStateCount}" status="j" var="stateCountInstance">
                        <g:if test="${stateColorInstance.STATE == stateCountInstance.EQP_STATE}">
                            <li style="background-color: ${stateColorInstance.COLOR}; font-family: '微软雅黑', '宋体'; border-radius: 4px;" title="${stateColorInstance.STATE}">
                                &nbsp;&nbsp;${stateColorInstance.STATE}&nbsp;<span class="layui-badge layui-bg-black">${stateCountInstance.EQP_STATE_COUNT}</span>&nbsp;
                            </li>
                        </g:if>
                    </g:each>
                </g:each>
                <li><a href="javascript:void(0)" class="btn" onclick="qiehuan()">切换</a></li>
            </ul>
        </div>
    </div>
    <!-- 标题 END -->
    <!-- 画布 START -->
    <div class="myCanvas" id="myCanvas"></div>
    <!-- 画布 END -->
</div>
<!-- 整个body显示页面 END -->
<!-- 浮动 START -->
<div class="float" id="floatPaterBody">
    <div id="floatChild1Body">
        <pre>
        <g:each in="${eqpInfoList}" status="i" var="eqp">
            ${i+1}&nbsp;&nbsp;${eqp.EQP_ID}&nbsp;&nbsp;${eqp.EQP_DESC}&nbsp;&nbsp;${eqp.EQP_TYPE}&nbsp;&nbsp;${eqp.EQP_LOC}&nbsp;&nbsp;${eqp.EQP_STATE}<br />
        </g:each>
        </pre>
    </div>
    <div id="floatChild2Body"></div>
</div>
<!-- 浮动 END -->
<!-- 事件框 START -->
<div>
    <ul class="contextmenu" style="display:none;position: absolute;">
        <li id="actualPower"></li>
        <li><a href="javascript:void(0)">remove</a></li>
    </ul>
</div>
<!-- 事件框 END -->
</body>
</html>
<g:render template="../template/showEqpBoardJS"/>
<script type="text/javascript">
    $(document).ready(function () {
        getEqpInfo('${ctx}');
        floatDIV();
    });

    setInterval(function myRefresh() {
        getEqpInfo('${ctx}');
    }, 120000);
</script>